<template>
  <div class="ele-body">
    <a-card :bordered="false" title="调拨入库信息">
      <infoTable :receiptsDetail="receipts_detail" />
      <div class="margin-y-30">
        <a-form
          class="margin-y-15"
          :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
          :wrapper-col="{
            md: { span: 17 },
            sm: { span: 20 },
            xs: { span: 24 }
          }"
        >
          <a-row :gutter="24">
            <a-col :md="24" :sm="24" :xs="24"
              ><goodsTable
                :total="total"
                :tableData="tableData"
                :optShow="true"
                :delShow="false"
                @action="action"
								@getNext="getDetail"
            /></a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <!-- 货品详情弹窗 -->
    <goods-detail
      v-if="showDetail"
      v-model:visible="showDetail"
      :goodsCode="goodsCode"
    />
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined
  } from '@ant-design/icons-vue';
  import infoTable from '@/components/jewelry/infoTable.vue';
  import goodsTable from '@/components/jewelry/goodsTable.vue';
  import goodsDetail from './components/goods-detail.vue';
  import { uploadUrl } from '@/config/setting';
  import { receipts_purchase_detail } from '@/api/jewelry/receipts_enter';

  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  const loading = ref(false);
  const showCheck = ref(false);
  const showDetail = ref(false);
  const goodsCode = ref(null);
  const receipts_detail = ref({});
  const goods = ref({});
  const visible = ref(false);
  //货品list
  const tableData = ref([]);
	const total = ref(0);

  const fileList = ref([
    /* {
	  uid: '1',
	  name: 'xxx.png',
	  status: 'done',
	  response: 'Server Error 500',
	  url: 'http://www.baidu.com/xxx.png'
	} */
  ]);
  /* 完全自己控制选择文件后的处理 */
  const uploadHandler = (info) => {
    if (info && info.file && info.file.response) {
      const data = info.file.response.data;
      /* imageUrl.value = data.path;
      form.thumb = data.id; */
    }
  };
  const handleDrop = (e) => {
    console.log('上传', e);
  };
  const action = (row) => {
    if (row.action == 'look') {
      lookGoods(row);
    } 
  };
  const lookGoods = (row) => {
    showDetail.value = true;
    goodsCode.value = row.code;
  };

  //主石信息
  const table1 = reactive({
    loading: false,
    tableData: [
      {
        type: 1,
        name: '',
        gem_category_name: '',
        price: '',
        amount: '',
        num: 1,
        weight: '',
        stone_code: '',
        form: '',
        specs: '',
        color: '',
        neatness: '',
        cut: '',
        buffing: '',
        symmetric: '',
        fluorescence: '',
        fluorescence_color: '',
        inlay_fee: '',
        cert_fee: '',
        cert_cate: '',
        cert_code: ''
      }
    ]
  });
  //副石信息
  const table2 = reactive({
    loading: false,
    tableData: [
      {
        type: 2,
        name: '',
        gem_category_name: '',
        price: '',
        amount: '',
        num: 1,
        weight: '',
        stone_code: '',
        form: '',
        specs: '',
        color: '',
        neatness: '',
        cut: '',
        buffing: '',
        symmetric: '',
        fluorescence: '',
        fluorescence_color: '',
        inlay_fee: '',
        cert_fee: '',
        cert_cate: '',
        cert_code: ''
      }
    ]
  });

  onMounted(() => {
    getDetail(1);
  });
  const getDetail = (page) => {
    receipts_purchase_detail({ code: query.code, page:page }).then((res) => {
      console.log('res', res);
			total.value = res.goods.total;
      goods.value = res.goods.data[0];
      tableData.value = res.goods.data;
      receipts_detail.value = res.receipts_detail;
    });
  };
  const toSelect = () => {
    showCheck.value = true;
  };

  const save = () => {};

  /* 更新visible */
  const updateVisible = (value) => {
    console.log('value', value);
    visible.value = value;
  };
</script>

<style lang="less" scoped>
  :deep(.ant-upload.ant-upload-select.ant-upload-select-text) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 440px !important;
    height: 180px !important;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    .ant-upload {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
</style>
